<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
  <title>www.jb51.net JS�϶�ѡ��table��ĵ�Ԫ��</title>
  <script type="text/javascript" src="../js/jquery.min.js"></script>
  <style>
    .table-container {
      width: 100%;
      /*overflow-y: auto;*/
      /*_overflow: auto;*/
      margin: 0 0 1em;
      background-color: white;
    }

    table {
      border: 0;
      border-collapse: collapse;
    }

    table tr {
      height: 20px;
    }

    table td, table th {
      border: 1px solid #999;
      padding: 0;
      height: 30px;
    }

    /*����*/
    .table-time div {
      text-align: center;
      /*min-width: 124px;*/
    }

    .table-time, tr th {
      background-color: #489EE2;
    }

    .div-ISelect {
      background-color: #EAF2FF;
    }

    /*ͼ��*/
    ul li {
      list-style: none;
      float: left;
    }

    .table-container td {
      cursor: pointer;
    }

    td div {
      display: inline-block;
      white-space: nowrap;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

  </style>
  <script>
		$(function () {
			initForm();
		});
		//by baojian
		let firstindexrow;
		let firstindexcol;
		let curindexrow;
		let curindexcol;

		function initForm() {

			let isMouseDown = false,
				isHighlighted
			//���ӵ���¼�
			$(".select").mousedown(function (event) {
				isMouseDown = true;
				let currentTD = $(this);
				$("tr:gt(0) td").each(function (i) {
					$(this).removeClass('div-ISelect');
				});
				firstindexrow = currentTD.parent().index();
				firstindexcol = currentTD.index();
				curindexrow = currentTD.parent().index();
				curindexcol = currentTD.index();
				$("tr:eq(" + curindexrow + ") td:eq(" + curindexcol + ")").addClass("div-ISelect");
				return false;
			}).mouseenter(function (e) {
				if (isMouseDown) {
					let currentTD = $(this);
					$("tr:gt(0) td").each(function (i) {
						$(this).removeClass('div-ISelect');
					});
					curindexrow = currentTD.parent().index();
					curindexcol = currentTD.index();
					let minrow = curindexrow > firstindexrow ? firstindexrow : curindexrow;
					let mincol = curindexcol > firstindexcol ? firstindexcol : curindexcol;
					let maxrow = curindexrow > firstindexrow ? curindexrow : firstindexrow;
					let maxcol = curindexcol > firstindexcol ? curindexcol : firstindexcol;
					for (let i = minrow; i <= maxrow; i++) {
						for (let j = mincol; j <= maxcol; j++) {
							$("tr:eq(" + i + ") td:eq(" + j + ")").addClass("div-ISelect");
						}
					}
				}
			});
			$(document).mouseup(function () {
				isMouseDown = false;
			});
		}
  </script>
</head>
<body>
<div class="table-title"></div>
<div class="table-container">
  <table>
    <caption>���Ǳ������</caption>
    <tbody>
    <tr>
      <th></th>
      <th class="table-week"><span>��һ</span></th>
      <th class="table-week"><span>�ܶ�</span></th>
      <th class="table-week"><span>����</span></th>
      <th class="table-week"><span>����</span></th>
      <th class="table-week"><span>����</span></th>
      <th class="table-week"><span>����</span></th>
      <th class="table-week"><span>����</span></th>
    </tr>
    <tr>
      <td class='select'>��һ��</td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
      <td class='select'>
        <div count='1'>��Լ���յ���˾���յ���˾�ĺ͹�˾�Ļ�ʢ��</div>
        <div class='div-right'>��</div>
      </td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
    </tr>
    <tr>
      <td class='select'>�ڶ���</td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
    </tr>
    <tr>
      <td class='select'>������</td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
      <td class='select'>
        <div count='1'>��Լ��1��</div>
        <div class='div-right'>��</div>
      </td>
    </tr>
    </tbody>
  </table>
</div>
</body>
</html>
